<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            background: black;
        }
        img{
            position: relative;
            width: 150px;
            height: 150px;
            background: red;
            vertical-align: bottom;
        }
        .photoDisplay{
            width: 700px;
            margin: 50px auto 10px auto;
            border: 1px solid #24acce;
            background: black;
            color: red;
        }
        .photos{
            width: 600px;
            margin: 20px auto;
        }
        .photo{
            width: 150px;
            height: 150px;
            position: relative;
            display: inline-block;
            overflow: hidden;
            vertical-align: bottom;
        }
        .photoText{
            display: inline-block;
            background: #333;
            -moz-opacity:.50;
            filter:alpha(opacity=50);
            opacity:.50;
            color: #53a3ce;
            position: relative;
            bottom: 50px;
            width: 150px;
            padding: 10px 0;
            border-top: 1px solid #999;
            overflow: hidden;
            text-align: center;
        }
        .title{
            text-align: center;
            position: relative;
            border-bottom: 1px solid #24acce;
        }
        .tips{
            position: absolute;
            bottom: -7px;
            right: 19px;
            background: black;
        }
    </style>
</head>
<body>
<script>
    var ViewCommand=(function () {
        var tpl={
            product:[
                '<div class="photo">',
                '<img src="{#src#}" attr="{#text#}"/>',
                '<div class="photoText">{#text#}</div>',
                '</div>'
            ].join(''),
            title:[
                '<div class="title">',
                '<h2>{#title#}</h2>',
                '<div class="tips">{#tips#}</div>',
                '</div>'
            ].join('')
        };
        var html='';
        function formateString(str,obj) {
            return str.replace(/\{#(\w+)#\}/g,function (match,key) {
                return obj[key];
            })
        }
        var Action={
            create:function (data,view) {
                if(data.length){
                    for(var i=0;i<data.length;i++){
                        html+=formateString(tpl[view],data[i]);
                    }
                }else{
                    html+=formateString(tpl[view],data);
                }
            },
            display:function (container,data,view) {//id
                if(data){
                    this.create(data,view);
                }
                var element= document.getElementById(container);
                if(!element){
                    element=document.createElement('div');
                    element.id=container;
                }
                element.className='photoDisplay';

                if(view=="product"){
                    var element1= document.getElementsByClassName('photos')[0];
                    if(!element1){
                        element1=document.createElement('div');
                        element1.className='photos';
                    }
                    element1.innerHTML+=html;
                    element.appendChild(element1)
                }else {
                    element.innerHTML+=html;
                }
                document.body.appendChild(element);
                html='';
            }
        };
        return function execute(msg) {
            msg.param=Object.prototype.toString.call(msg.param)==="[object Array]"?msg.param:[msg.param];
            Action[msg.command].apply(Action,msg.param);
        };
    })();
    var productData=[
        {
            src:'images/bg_member.jpg',
            text:'咖啡'
        },
        {
            src:'images/bg_shoulei.jpg',
            text:'行走之间'
        }
    ];
    var titleData={
        title:'照片墙',
        tips:"生活的艺术"
    };
    ViewCommand({
        command:'display',
        param:['product',titleData,'title']
    });
    ViewCommand({
        command:'display',
        param:['product',productData,'product']
    });
    ViewCommand({
        command:'display',
        param:['product',productData,'product']
    });
    ViewCommand({
        command:'display',
        param:['product',productData,'product']
    });
    ViewCommand({
        command:'display',
        param:['product',productData,'product']
    });
</script>
</body>
</html>